import React, { useState } from 'react';
import {
  SearchOutlined,
  SyncOutlined,
  BellOutlined,
  ExpandOutlined,
  DragOutlined,
  SettingOutlined,
  SelectOutlined
} from '@ant-design/icons';
import './title.scss'
// 侧边栏 标签 <SunOutlined /> <MoonOutlined />
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
import { Space, Switch } from 'antd';
// 1对话框
import { Modal } from 'antd';
//2文字提示
import { Button, ConfigProvider, Tooltip } from 'antd';
// 3，气泡卡片
import { Popover } from 'antd';
// 6，抽屉
import { Drawer } from 'antd';
//引入
import { changeTheme, changeTagColor, changeMenuColor, changeTags } from '../../store/color/them'
import { useDispatch, useSelector } from 'react-redux';


interface Props {
  setMyThmem: any,
  setMyTab: any
}

function title(props: Props) {
  // 1搜索
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 2刷新
  const handClick = () => {
    window.location.reload()
  }
  // 3公告 气泡卡片
  const [activeTab, setActiveTab] = useState(0); // 初始激活第一个Tab  
  const handleTabChange = (index: any) => {
    setActiveTab(index);
  };
  const content = (
    <div>
      <div>
        {['通知', '公告', '系统消息'].map((tab, index) => (
          <button key={index} onClick={() => handleTabChange(index)}
            style={{ marginRight: '10px', padding: '5px 10px', cursor: 'pointer', border: 'none', background: index === activeTab ? '#007BFF' : 'transparent', color: index === activeTab ? 'white' : 'black' }}>
            {tab}
          </button>
        ))}
      </div>
      <div key={activeTab} style={{ marginTop: '20px' }}>
        {/* 根据activeTab的值来显示对应的Tab内容 */}
        {activeTab === 0 && <div>
          <hr />
          <p><span style={{ background: '#DE7E7E', color: 'white' }}>通知</span>阶非指明好情风器发设面主取政满法专</p>
          <p><span style={{ background: '#DE7E7E', color: 'white' }}>通知</span>般引号值称看三等行下过京入需专委</p>
          <p><span style={{ background: '#DE7E7E', color: 'white' }}>通知</span>气感术林国量更眼济目交即该美。</p>
          <p><span style={{ background: '#DE7E7E', color: 'white' }}>通知</span>感就变且规公制实数阶院真同科里但。</p>
          <p><span style={{ background: '#DE7E7E', color: 'white' }}>通知</span>论个矿员单委了把持多真叫最几图制展。</p>
        </div>}
        {activeTab === 1 && <div>
          <hr />
          <p><span style={{ background: '#EDC0C0', color: 'white' }}>公告</span>阶非指明好情风器发设面主取政满法专。</p>
          <p><span style={{ background: '#EDC0C0', color: 'white' }}>公告</span>万完育利把县需各决速用广争但。</p>
          <p><span style={{ background: '#EDC0C0', color: 'white' }}>公告</span>很为六易共及经身极满在红问自。</p>
          <p><span style={{ background: '#EDC0C0', color: 'white' }}>公告</span>论个矿员单委了把持多真叫最几图制展。</p>
          <p><span style={{ background: '#EDC0C0', color: 'white' }}>公告</span>以土听就子话据青听复则进各利整火同</p>
        </div>}
        {activeTab === 2 && <div>
          <hr />
          <p><span style={{ background: '#96EBF2', color: 'white' }}>系统消息</span>论头议细节消更快信到计维争写世。</p>
          <p><span style={{ background: '#96EBF2', color: 'white' }}>系统消息</span>感就变且规公制实数阶院真同科里但。</p>
          <p><span style={{ background: '#96EBF2', color: 'white' }}>系统消息</span>气感术林国量更眼济目交即该美。</p>
          <p><span style={{ background: '#96EBF2', color: 'white' }}>系统消息</span>般引号值称看三等行下过京入需专委</p>
          <p><span style={{ background: '#96EBF2', color: 'white' }}>系统消息</span>很为六易共及经身极满在红问自。</p>
        </div>}

        {/* 或者使用更简洁的方式，如使用数组映射 */}
        {/* {[  
          <div key="0">这是通知的内容</div>,  
          <div key="1">这是公告的内容</div>,  
          <div key="2">这是系统消息的内容</div>,  
        ][activeTab]} */}
      </div>
    </div>

  );
  // 4,全屏
  const [icon, setIcon] = useState('ExpandOutlined');
  const ClickOpen1 = () => {
    if (!document.fullscreenElement) {
      try {
        document.documentElement.requestFullscreen();
        setIcon('DragOutlined')
      } catch (err) {
        alert('浏览器不支持全屏')
        setIcon('ExpandOutlined')
      }
    } else {
      document.exitFullscreen()
      setIcon('ExpandOutlined')
    }
  }
  // 全屏方法二
  // const ClickOpen = () => {
  //   if (!document.documentElement.requestFullscreen().catch((err) => {
  //     alert('浏览器不支持')
  //   })) {

  //   } else {
  //     document.exitFullscreen()
  //   }

  // }
  // 5,文字提示
  const text = <span><button>个人中心</button> <br /> <button onClick={() => ToLogin()}>退出登录</button></span>;
  // 退出登录
  const ToLogin = () => {
    localStorage.removeItem('token')
    window.location.href = '/login'
  }
  // 6，设置 抽屉
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  //全局控制黑夜白天

  //主题 标题栏显现
  const themeConfig = useSelector(state => state.themeSlice)
  const dispatch = useDispatch()
  // console.log('themeConfig', themeConfig);

  // 主题颜色
  const colorList = [
    '#4060c7',
    '#409EFF',
    '#009688',
    '#27ae60',
    '#e74c3c',
    '#fd726d',
    '#f39c12',
    '#9b59b6'
  ]
  // 导航栏颜色
  const tabColorList = [
    '#ccc',
    '#000000',
    '#009688',
    '#27ae60',
    '#e74c3c',
    '#fd726d',
    '#f39c12',
    '#9b59b6'
  ]
  // const theme = (i: any) => {
  //   document.documentElement.style.setProperty('--mainColor', i)
  // }
  // 导航栏 navbg
  // const navBar = (i: any) => {
  //   document.documentElement.style.setProperty('--navColor', i)
  // }
  // 黑夜白天   cheack cheackK
  const Night = (e: any) => {
    // document.documentElement.style.setProperty('--mainColor', 'black')
    // document.documentElement.style.setProperty('--navColor', 'white')
    props.setMyThmem(e)
  }
  // const Nights = (e: any) => {
  //   props.setMyTab(e)
  // }

  return (
    <span className='spanBox'>
      <span>
        <SearchOutlined onClick={showModal} />
        <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>暂无搜索结果</p>
        </Modal>
      </span>
      <span><SyncOutlined onClick={handClick} /></span>
      <span>
        <Popover placement="bottom" content={content}>
          <BellOutlined />
        </Popover>

      </span>
      <span>{icon === 'ExpandOutlined' ? <span onClick={() => ClickOpen1()}><ExpandOutlined/></span> 
      : <span onClick={() => ClickOpen1()}><DragOutlined/></span>}</span>
      {/* <span><{icon==='ExpandOutlined'  ? 'Expand' : 'Drag'} onClick={ClickOpen1} /></span> */}
      <span>
        <Tooltip placement="bottom" title={text}>
          <img src="/src/assets/img/avart.jpg" alt="" style={{ width: '30px', height: '30px', borderRadius: '50%', marginBottom: '-5px', marginRight: '5px' }} />
          <Button>BIG CUTE</Button>
        </Tooltip>

      </span>
      <span>
        <SettingOutlined onClick={showDrawer} />
        <Drawer title="布局设置" onClose={() => onClose()} open={open} width={400}>
          <p style={{ textAlign: 'center', }}>-主题颜色-</p>
          <div className='spanItem'>
            {
              colorList && colorList.map(item => (
                <div
                  key={item}
                  className='theme-item'
                  style={{ background: item }}
                  onClick={() => dispatch(changeTheme(item))}
                >
                  {item === themeConfig.primary && <SelectOutlined className='icon' />}
                </div>
              ))
            }
            {/* {
              mainColor.map((item: any, index: any) => {
                return <span key={index} style={{ background: item }} onClick={() => theme(item)}></span>
              })
            } */}
          </div>
          <p style={{ textAlign: 'center', }}>-导航栏颜色-</p>
          <div className='spanItem'>
            {
              tabColorList && tabColorList.map(items => (
                <div
                  key={items}
                  className='theme-item'
                  style={{ background: items }}
                  onClick={() => dispatch(changeTagColor(items))}
                // onClick={() => navBar(items)}
                >
                  {items === themeConfig.tabColor && <SelectOutlined className='icon' />}
                </div>
              ))
            }
            {/* {
              navColor.map((item: any, index: any) => {
                return <span key={index} style={{ background: item }} onClick={() => navBar(item)}></span>
              })
            } */}
          </div>
          <p>侧边栏模式 黑夜/白天 <Switch
            checkedChildren={<SunOutlined className='sun' />}
            unCheckedChildren={<MoonOutlined className='yun' />}
            defaultChecked
            onChange={Night}
          /></p>
          <p>标签栏是否显示 <Switch
            checked={themeConfig.istags}
            style={{ marginLeft: 24 }}
            onChange={checked => dispatch(changeTags(checked))}
          />
          </p>
        </Drawer>
      </span>
    </span>
  )
}

export default title
